<template>
    <div class="paperWrap">
        <div class="paperContent">
            <div style="max-height:calc(100vh - 200px);min-height:400px;overflow:auto;">
            	<QuestionList 
	            	:data="examList" 
	            	pattern="answer"
	            	:showScore="false"
            	></QuestionList>
	            <div v-show="examList.length == 0" class="defGraphWrap">
	                <div class="defGraph"></div>
	                <div class="graphText">暂无信息</div>
	            </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {getGuideQuestionAnswerDetail} from '@/api/selfStudy/courseExp.js'
    import QuestionList from '@/components/question-list'
    export default {
        name: 'exam',
        components:{QuestionList},
        props:['UEInfo'],
        data() {
            return {
                userId:'',
                // 试卷分数
                examScore:0,
                examName:'',
                // 试卷题
                examList:[],
                // 试卷答案
                result: {},
                // 学员成绩
                userScore: 0,
            }
        },
        created(){
           
        },
        mounted() {
            this.getUserAnswer()
        },
        destroyed() {

        },
        methods: {
            // 查看分数接口
            getRankList(examid,userid){
                let _this = this;
                let params={
                    userId:userid
                };
                getRnak(examid,params).then(res=>{
                    if(res.code === 1){
                        if(res.attribute.dataList.length>0){
                            _this.userScore = res.attribute.dataList[0].grade;
                        }
                    }
                })
            },
            // 试卷回显答案
            getRightAnswer(arr){
                let showAnswer = arr.filter(item=>item.isRight===1);
                let show = showAnswer.map(item=>item.description);
                let explanation = showAnswer.map(item=>item.explanation);
                let ids = showAnswer.map(item=>item.answerID)[0];
                return {
                    show:show.join('；'),
                    explanation:explanation.join('；'),
                    id:ids
                }
            },
            // 回显学员答案
            getUserAnswer(ecid,userId){
                getGuideQuestionAnswerDetail(this.UEInfo.ecId,{userId:this.UEInfo.studentId})
                    .then(res=>{
                        if(res.code === 1){
                            this.examList = res.data.items.map(item => {
								let ques = {
									...item.questionDto,
	                            	...item,
	                            	userAnswer:item.yourAnswer,
	                            	answerResult:item.yourIsRight,
	                            	name:item.questionDto.description,
	                            	description:item.questionDto.explanation
								}
								if(ques.modeCode === 2 || ques.modeCode === 5){
									ques.userAnswer = ques.userAnswer ? ques.userAnswer.split(',') : [];
								}
                            	return ques
                            });
                        }else {
                            this.$Message.error({
                                content:'试卷答案信息获取错误',
                                duration:3,
                            })
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            // 多选题
            handleJudgeScore(val1,val2){
                let arr = []
                if(val1.length > 0){
                    for(let i = 0; i < val1.length;i++){
                        if(val1[i].isRight === 1 || val1[i].isRight === '1'){
                            arr.push(val1[i].answerID)
                        }
                    }
                    if(JSON.stringify(arr) === JSON.stringify(val2)){
                        return true
                    }else {
                        return false
                    }
                }else {
                    return false
                }
            },
            // 判断题的正确与否
            handleAnws(val1){
                if(val1.length > 0){
                    if(val1[0].showRight === '1' || val1[0].showRight === 1){
                        return true
                    }else {
                        return false
                    }
                }
            },
            getExpQuestionAnswerDetail(UEInfo){
				getExpQuestionAnswerDetail(UEInfo.ecId,{userId:UEInfo.studentId}).then(data => {
					
				})
			},
			parseDescription(yourAnswer,question){
		      	if(!question.answers){
		      		return;
		      	}
		      	let description;
		      	description = question.description.replace(/\{\{.*?\}\}/g,`<span class='quesBlank' disabled style='display:inline-block;width:40px;padding:0px 5px;outline:none;box-shadow:none;border:none;border-bottom:1px solid rgb(168,166,200);color:#2d8cf0'>${yourAnswer}</span>`);
		      	let el = document.createElement("div");
		      	el.innerHTML = description;
		      	return el.innerHTML;
		    },
        },
    }
</script>
<style>
    .paperWrap .ivu-tag{
        height: 16px;
        margin: 0;
        padding: 0 3px;
    }
    .paperWrap .ivu-tag-green{
        line-height: 16px;
    }
    .paperWrap .ivu-tag-blue{
        line-height: 16px;
    }
    .paperWrap .ivu-tag-red{
        line-height: 16px;
    }
    .paperWrap .ivu-tag-orange{
        line-height: 16px;
    }
</style>
<style scoped>
    .paperContent{
        width: 970px;
        background: #ffffff;
        height: auto;
        border-radius: 15px;
        padding: 10px;
    }
    .que-item{
    	position:relative;
        line-height: 2;
    }
    .item-wrap{
        overflow-x: hidden;
        overflow-y: auto;
    }
    .defGraphWrap{
        width: 157px;
        height: 126px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -72px;
        margin-top: -63px;
    }
    .defGraph{
        height: 126px;
        width: 157px;
        background: url("../../../assets/globalIcon/defGraph.png") no-repeat center center;
        background-size: 157px 126px;
    }
    .graphText{
        color: #888;
        font-size: 14px;
        text-align: center;
        margin-top: 20px;
    }
</style>
